<template>
  <div id="app">
    <ComForm
      ref="testForm"
      :option="option"
      :form="form"
      :fromClass="fromClass"
    >
      <!-- 自定义表单 -->
      <template slot="label1" slot-scope="{ row }">
        999:<el-input v-model="form.label1"></el-input>
      </template>
    </ComForm>
    <el-button @click="submitForm">校验</el-button>
  </div>
</template>

<script>
import ComForm from "./components/com-form.vue";

const dic = ["上海", "北京"];

const dicObj = [
  {
    check: "上海",
    code: 1,
  },
  {
    check: "北京",
    code: 2,
  },
];

export default {
  name: "Form",
  components: {
    ComForm,
  },
  data() {
    return {
      // form 可以为空对象,也可以设置表单默认值
      form: {
        // label2: "123456",
      },
      // 表单配置文件
      option: {
        ref: "form", // 设置表单 ref 属性写不写都行
        formSize: "mini", // 配置表单大小
        // labelWidth: "150px",
        // 所以属性事件都可按照 element-ui 来配置
        column: [
          // 配置表单【必填】
          {
            type: "Input", // 组件类型【必填】
            value: "999", // 默认值
            label: "文本框", // 组件 label
            prop: "label1", // 组件绑定的 prop【必填】
            placeholder: "我是默认值", // 空状态显示
            clearable: true, // 是否可清空
            focus: this.focus, // 获取焦点事件
            rules: [{ required: true, message: "请输入内容", trigger: "blur" }], // 校验条件
          },
          {
            type: "Password",
            label: "密码框",
            prop: "label2",
            placeholder: "我是默认值",
            clearable: true,
            focus: this.focus,
            rules: [{ required: true, message: "请输入内容", trigger: "blur" }],
          },
          {
            type: "Select",
            label: "下拉框",
            prop: "label5",
            change: (e) => {
              console.log("change", e);
            },
            props: {
              label: "check",
              value: "code",
            },
            dicData: dicObj,
            rules: [
              { required: true, message: "请选择下拉框", trigger: "blur" },
            ],
          },
          {
            type: "TimePicker",
            label: "时间选择器",
            prop: "label8",
            placeholder: "选择时间",
            disabled: true,
            pickerOptions: {
              start: "08:30",
              step: "00:15",
              end: "18:30",
            },

            rules: [
              { required: true, message: "时间不能为空", trigger: "blur" },
            ],
          },
          {
            type: "Radio",
            value: 1,
            label: "单选框",
            prop: "label3",
            change: (e) => {
              console.log("change", e);
            },
            props: {
              label: "check",
              value: "code",
            },
            dicData: dic,
            rules: [
              { required: true, message: "请选择单选按钮", trigger: "blur" },
            ],
          },
          {
            type: "Checkbox",
            label: "复选框",
            prop: "label4",
            disabled: true,
            change: (e) => {
              console.log("change", e);
            },
            // value: [],
            props: {
              label: "check",
              value: "code",
            },
            dicData: dicObj,
            rules: [
              { required: true, message: "复选框不能为空", trigger: "blur" },
            ],
          },
          {
            type: "Switchs",
            label: "开关",
            // value: true,
            prop: "label6",
            rules: [{ required: true, message: "请选择开关", trigger: "blur" }],
          },
          {
            type: "Silder",
            label: "滑块",
            prop: "label7",
            value: 50,
          },
        ],
      },
      fromClass: {
        isColumn: true,
      },
    };
  },
  methods: {
    focus() {
      console.log("---------------------------", "获得焦点");
    },
    //校验表单
    submitForm() {
      this.$refs["testForm"].submit((row) => {
        console.log("row", row);
      });
    },
  },
};
</script>

